{% extends "base.html" %}

{% block title %}Forgot Password - Quick Care Connect{% endblock %}

{% block content %}
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-lg-5 col-md-7">
            <div class="card shadow-lg border-0" style="border-radius: 16px; overflow: hidden;">
                <div class="card-header text-white text-center py-4"
                    style="background: linear-gradient(135deg, #10b981 0%, #059669 100%);">
                    <div style="font-size: 48px; margin-bottom: 8px;">🔑</div>
                    <h3 class="mb-0">Forgot Password?</h3>
                    <p class="mb-0 mt-2" style="opacity: 0.9;">Enter your email and we'll send you a reset link</p>
                </div>
                <div class="card-body p-5">



                    <form method="POST" id="forgot-form">
                        <div class="mb-4">
                            <label for="email" class="form-label fw-semibold">Email Address</label>
                            <input type="email" name="email" id="email" class="form-control form-control-lg"
                                placeholder="Enter your registered email" required autocomplete="off">
                        </div>

                        <div class="d-grid mb-3">
                            <button type="submit" class="btn btn-lg text-white fw-semibold"
                                style="background: linear-gradient(135deg, #10b981, #059669); border: none; border-radius: 8px; padding: 14px;">
                                <i class="fas fa-paper-plane me-2"></i> Send Reset Link
                            </button>
                        </div>
                    </form>

                    <div class="text-center mt-3">
                        <a href="{{ url_for('auth.login') }}" class="text-muted" style="font-size: 0.9rem;">
                            <i class="fas fa-arrow-left me-1"></i> Back to Login
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}